iT邦幫忙

第 11 屆 iThome 鐵人賽

DAY 11
0
Mobile Development

用 Flutter 開發一個 Android App 吧系列 第 11

用 Flutter 開發一個 Android App 吧 - Day 11. 設定頁面

  • 分享至 

  • xImage
  •  

本系列同步發表在 個人部落格,歡迎大家關注~

設定頁面(SettingPage)

這次的鐵人賽在設定頁面上,我想完成 2 個設定功能,主題(Theme)和語言(Language)。

從設計圖上可以看出來,設定頁面一部分是可以開合的列表。
這個一樣是源自 Material Design 的列表控制章節中的展開和閉合(Expand and collapse)

Flutter 中對應的 Widget 就是 ExpansionTile,它可以跟 ListTile 一樣直接使用在 ListView 裡面。

先直接來看看程式碼吧~

lib/pages/setting/setting.dart

import "package:flutter/material.dart";
import 'package:gitme_reborn/components/setting/theme_option.dart';

class SettingPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Setting"),
      ),
      body: ListView(
        children: <Widget>[
          ExpansionTile(
            leading: Icon(Icons.palette),
            title: Text("Theme"),
            children: <Widget>[
              Wrap(
                spacing: 8.0,
                children: <Widget>[
                  ThemeOption(color: Colors.black),
                  ThemeOption(color: Colors.blue),
                  ThemeOption(color: Colors.blueGrey)
                ],
              )
            ],
          ),
          ListTile(
            leading: Icon(Icons.language),
            title: Text("Language"),
            trailing: Row(
              mainAxisSize: MainAxisSize.min,
              children: <Widget>[
                Text("English"),
                Icon(Icons.keyboard_arrow_right),
              ],
            ),
            onTap: () {},
          ),
        ],
      ),
    );
  }
}

day11-1.png

ThemeOption 是自己寫的 Widget,基本上就是一個可點選的顏色方塊。
至於顏色切換的功能,牽扯到我這系列規劃的第三部份-狀態管理,所以這功能後續才會完成喔~

lib/components/setting/theme_option.dart

import "package:flutter/material.dart";

class ThemeOption extends StatelessWidget {
  const ThemeOption({
    Key key,
    this.color,
  }) : super(key: key);

  final Color color;

  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      child: Padding(
        padding: const EdgeInsets.all(8.0),
        child: SizedBox(
          width: 42.0,
          height: 42.0,
          child: DecoratedBox(
            decoration: BoxDecoration(color: color),
          ),
        ),
      ),
      onTap: () {},
    );
  }
}

設定語言頁面(SettingLanguagePage)

先來看看完成的樣子吧~

day11-2.gif

點選 GIF 可直接看 Commit

這邊又使用到另一種的 ListTile - RadioListTile,一樣也是可以直接使用在 ListView 裡面,它所完成的是單選擇功能。

RadioListTile(
  title: Text("繁體中文"),
  value: Language.traditionalChinese,
  groupValue: _language,
  onChanged: (Language value) {
    setState(() {
      _language = Language.traditionalChinese;
    });
  },
),

SettingLanguagePage 的詳細程式碼我就不貼上來了。
有興趣的人,可點選上面的 GIF,到 Gitme Reborn repo 看看~

小提醒:

  • 設定頁面實際功能都牽扯到這系列規劃的第三部份-狀態管理,後續將會慢慢完成喔~
  • 歡迎大家到 GitHub Star 這開源項目且持續關注~ ?

今天就容許小弟偷懶些,Day11 就先寫到這邊拉~~ /images/emoticon/emoticon11.gif

參考


上一篇
用 Flutter 開發一個 Android App 吧 - Day 10. 趨勢頁面
下一篇
用 Flutter 開發一個 Android App 吧 - Day 12. 關於頁面(AboutPage)
系列文
用 Flutter 開發一個 Android App 吧30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言